<template>
  <view class="record-page">
    <view class="record-section">
      <template v-if="records && records.length > 0">
        <view class="record-item" v-for="(item, i) in records" :key="item.id || i">
          <view class="record-row">
            <view class="record-title">{{ item.shop }}-{{item.type}}</view>
            <view class="record-amount">-{{ item.amount }}元</view>
			
          </view>
          <view class="record-row record-time">{{ item.time }}</view>
          <view v-if="i !== records.length - 1" class="record-divider"></view>
        </view>
      </template>
      <template v-else>
        <!-- 添加空状态显示 -->
        <view class="record-empty-box">
          <image class="record-empty-img" src="/static/car1.png" mode="widthFix"></image>
          <view class="record-empty-text">暂无消费记录</view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';

// 获取当前登录用户ID
// const getCurrentUserId = () => {
//   const userInfo = uni.getStorageSync('userInfo');
//   if (!userInfo) {
//     uni.showToast({
//       title: '请先登录',
//       icon: 'none'
//     });
//     // 跳转到登录页面
//     setTimeout(() => {
//       uni.navigateTo({
//         url: '/pages/login/login'
//       });
//     }, 1500);
//     return null;
//   }
//   return userInfo.userId;
// };

// 响应式数据：记录列表
const records = ref([]); // 将静态数据清空

// 获取记录数据的方法
const fetchRecords = async () => {
  // const userId = getCurrentUserId();
  // if (!userId) return; // 如果没有获取到用户ID，则不发送请求

  try {
    const response = await unirequest({
      url: baseUrl+'/gas/record/list', // 后端接口地址
      method: 'GET',
      // data: { // 传递userId，假设后端需要
      //   userId: userId
      //   // 如果需要分页，可以在这里添加 pageNum, pageSize 等参数
      //   // pageNum: 1,
      //   // pageSize: 10
      // },
    });

    // 检查响应状态码和业务状态码
    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      // 假设后端返回的数据列表在 response.data.rows 中
      // 根据后端返回字段进行映射：name -> shop, createTime -> time, consume -> amount, type -> type (0->洗车, 1->维修)
      records.value = response.data.rows.map(item => ({
        id: item.id, // 保留id用于key
        shop: item.name, // 将 name 映射到 shop
        time: item.time, // 将 createTime 映射到 time
        amount: item.consume, // 将 consume 映射到 amount
        type: item.type === '0' ? '洗车' : (item.type === '1' ? '维修' : item.type) // 添加 type 字段映射并进行转换，与字符串比较
        // 保留其他可能需要的字段
        // remark: item.remark,t
        // updateTime: item.updateTime
      })) || [];

      // uni.showToast({
      //   title: '获取记录数据成功',
      //   icon: 'success'
      // });
    } else {
      const errorMessage = response.data && response.data.msg ? response.data.msg : '获取记录数据失败';
      uni.showToast({
        title: errorMessage,
        icon: 'none'
      });
      console.error('获取记录数据失败:', response);
    }

  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({
      title: '网络请求失败',
      icon: 'none'
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchRecords();
});

</script>
<style>
.record-page {
  background: #f7f7f7;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.record-section {
  background: #fff;
  border-radius: 24rpx;
  margin: 32rpx 16rpx 0 16rpx;
  padding: 0 0 0 0;
  box-shadow: 0 8rpx 32rpx rgba(35,138,255,0.04);
}
.record-item {
  padding: 28rpx 28rpx 10rpx 28rpx;
}
.record-row {
  display: flex;
  flex-direction: row;
  padding: 5px;
  align-items: center;
  justify-content: space-between;
}
.record-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
}
.record-amount {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
}
.record-time {
  font-size: 24rpx;
  color: #b0b0b0;
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}
.record-divider {
  height: 2rpx;
  background: #f2f2f2;
  margin: 0 -28rpx;
  border-radius: 2rpx;
}

/* 空状态样式 */
.record-empty-box {
  background: #fff;
  border-radius: 32rpx;
  margin: 40rpx 16rpx 0 16rpx;
  padding: 120rpx 0 120rpx 0;
  box-shadow: 0 8rpx 32rpx rgba(35,138,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.record-empty-img {
  width: 220rpx;
  opacity: 0.25;
  margin-bottom: 32rpx;
}

.record-empty-text {
  color: #bbb;
  font-size: 30rpx;
  margin-top: 12rpx;
}
</style> 